<template>
    <view class="container">
        <view class="tabs">
            <up-sticky>
                <up-tabs :list="stickyList" @click="switchstickyList" :current="currentTab"></up-tabs>
            </up-sticky>

            <!-- 搜索 -->
            <view class="allSelection" :class="{ 'card-animate': showAnimation }" style="animation-delay: 0.1s;">
                <view style="flex: 1;">
                    <uni-search-bar @confirm="search" placeholder="请输入授权编号" v-model="searchValue" @input="input">
                    </uni-search-bar>
                </view>

                <view @click="showDrawer">
                    <uni-icons type="settings-filled" size="28" color="#4C7AF2"></uni-icons>
                </view>
            </view>

            <!-- 添加全选控制行 -->
            <view class="selectAll" :class="{ 'card-animate': showAnimation }" style="animation-delay: 0.2s;">
                <checkbox :checked="allSelected" @change="toggleAllSelect" style="margin-right: 10px;" />
                <text>全选</text>
                <button class="batchBtn" type="primary" @click="batchApprove">
                    批量通过
                </button>
                <button class="batchBtn" type="warn" @click="batchReject">
                    批量驳回
                </button>
            </view>
        </view>


        <!-- 列表 -->
        <view class="financingList" v-if="financingList.length > 0">
            <view class="listItem" :class="{ 'card-animate': showAnimation }" style="animation-delay: 0.3s;"
                v-for="(item, index) in financingList" :key="index">
                <uni-card>
                    <view class="listItemTop">
                        <view style="display: flex; align-items: center;">
                            <checkbox :checked="selectedItems.includes(index)" @change="toggleSelect(index)"
                                style="margin-right: 5rpx;" />
                            <view style="display: flex; align-items: center;">
                                授权编号：01250520160621522
                                <uni-icons type="paperclip" @click="copyOrderNum(item)" size="18"
                                    color="#4C7AF2"></uni-icons>
                            </view>
                        </view>
                    </view>
                    <view class="listItemContent">
                        <view class="itemLine">
                            <view class="contentLeft">
                                单位名称:
                            </view>
                            <view class="contentRight">
                                校宝在线（杭州）科技股份有限公司
                            </view>
                        </view>
                        <view class="itemLine">
                            <view class="contentLeft">
                                活动名称:
                            </view>
                            <view class="contentRight">
                                长安长安美育系列活动
                            </view>
                        </view>
                        <view class="itemLine">
                            <view class="contentLeft">
                                活动类型:
                            </view>
                            <view class="contentRight">
                                朗诵活动
                            </view>
                        </view>
                        <view class="itemLine">
                            <view class="contentLeft">
                                授权期限:
                            </view>
                            <view class="contentRight">
                                2025-10-17 至 2026-10-17
                            </view>
                        </view>
                        <view class="itemLine">
                            <view class="contentLeft">
                                渠道/姓名:
                            </view>
                            <view class="contentRight">
                                <uni-tag :inverted="true" text="T1" /> faker
                            </view>
                        </view>
                        <view class="itemLine">
                            <view class="contentLeft">
                                推广平台:
                            </view>
                            <view class="contentRight">
                                抖音 / 白名单赛事网
                            </view>
                        </view>
                        <view class="itemLine">
                            <view class="contentLeft">
                                推广地区:
                            </view>
                            <view class="contentRight">
                                北京 通州区 经开区
                            </view>
                        </view>
                    </view>
                    <view class="listItemBottom">
                        <view class="orderState">
                            <uni-tag text="待财务审核" type="warning" />
                        </view>
                        <button class="listBtn" type="primary">
                            <uni-icons type="checkmarkempty" size="20" color="#fff"></uni-icons>
                            通过
                        </button>
                        <button class="listBtn" type="warn">
                            <uni-icons type="closeempty" size="20" color="#fff"></uni-icons>
                            驳回
                        </button>
                    </view>
                </uni-card>
            </view>
        </view>
        <!-- 订单列表空状态 -->
        <view class="empty-state" v-else>
            <image src="/static/images/empty-data.png" mode="aspectFit" class="empty-icon"></image>
            <text class="empty-text">暂无数据</text>
        </view>

        <!-- 抽屉 -->
        <uni-drawer ref="showSelection" mode="right" :width="300">
            <view class="drawer">
                <view class="drawerTitle">筛选</view>
                <uni-forms>
                    <uni-forms-item label="活动名称">
                        <uni-data-select v-model="formData.activityName" :localdata="activityName"
                            placeholder="请选择阶段"></uni-data-select>
                    </uni-forms-item>
                    <uni-forms-item label="渠道">
                        <uni-easyinput v-model="formData.name" placeholder="请输入渠道编号" />
                    </uni-forms-item>
                    <uni-forms-item label="创建时间">
                        <uni-easyinput v-model="formData.name" placeholder="请输入创建时间" />
                    </uni-forms-item>
                    <uni-forms-item>
                        <button class="confirm" @click="confirmSelection" type="primary">确认</button>
                    </uni-forms-item>
                </uni-forms>
            </view>
        </uni-drawer>
    </view>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'
import { onShow, onHide } from '@dcloudio/uni-app'

// 状态定义 -----------------------------------------------------------------
const loading = ref(false)
const showAnimation = ref(false) // 动画状态
const currentTab = ref(1) // 当前tab
const stickyList = ref([
    { name: '全部订单', orderStatus: 2 },
    { name: '待财务审核', orderStatus: 6 },
    { name: '审核通过', orderStatus: 5 },
    { name: '审核驳回', orderStatus: 4 },
])
const showSelection = ref(null) // 控制筛选框显示DOM
const searchValue = ref('') // 搜索内容
const activityName = ref([
    { "value": 0, "text": "韶华杯" },
    { "value": 1, "text": "跃动杯" }
]) // 活动名称
const stageName = ref([
    { "value": 0, "text": "省赛" },
    { "value": 1, "text": "国赛" }
]) // 活动名称
const selectedItems = ref([]) // 多选
const formData = ref({})
const financingList = ref([1, 1, 1]) // 列表数据

// 生命周期钩子 ------------------------------------------------------------
onMounted(() => {
    init()
})

onShow(() => {
    // 页面载入后，延时显示动画
    setTimeout(() => {
        showAnimation.value = true;
    }, 100);
})

onHide(() => {
    // 页面隐藏时，重置动画状态
    showAnimation.value = false;
})

// 计算属性 -----------------------------------------------------------------

// 全选/取消全选
const allSelected = computed(() => {
    return selectedItems.value.length === financingList.value.length
})


// 方法定义 -----------------------------------------------------------------
const init = async () => {
    try {
        loading.value = true
        // 初始化逻辑
    } catch (error) {
        console.error(error)
        uni.showToast({
            title: '操作失败',
            icon: 'none'
        })
    } finally {
        loading.value = false
    }
}

const search = (res) => {
    console.log(res)
}

const input = (res) => {
    console.log(res)
}

const switchstickyList = (event) => {
    currentTab.value = event.index
    console.log('切换成功', currentTab.value);
}

const showDrawer = () => {
    showSelection.value.open();
}

const confirmSelection = () => {
    showSelection.value.close();
    console.log('筛选搜索成功')
}

// 取消筛选
const toggleAllSelect = () => {
    if (allSelected.value) {
        selectedItems.value = []
    } else {
        selectedItems.value = Array(financingList.value.length).fill().map((_, i) => i)
    }
}

// 单个选择/取消选择
function toggleSelect(index) {
    const exists = selectedItems.value.includes(index)
    if (exists) {
        selectedItems.value = selectedItems.value.filter(i => i !== index)
    } else {
        selectedItems.value.push(index)
    }
}

// 批量通过
function batchApprove() {
    if (selectedItems.value.length === 0) {
        uni.showToast({ title: '批量通过成功', icon: 'none' })
        return
    }

    // 这里添加批量通过的逻辑
    console.log('批量通过:', selectedItems.value)
    // 可以调用API或更新数据
}

// 批量驳回
function batchReject() {
    if (selectedItems.value.length === 0) {
        uni.showToast({ title: '批量驳回成功', icon: 'none' })
        return
    }

    // 这里添加批量驳回的逻辑
    console.log('批量驳回:', selectedItems.value)
    // 可以调用API或更新数据
}

// 复制单号
const copyOrderNum = (orderNum) => {
    // 调用微信小程序的 setClipboardData API
    uni.setClipboardData({
        data: orderNum,
        success: () => {
            uni.showToast({
                title: '复制成功',
                icon: 'success'
            });
        },
        fail: () => {
            uni.showToast({
                title: '复制失败',
                icon: 'none'
            });
        }
    });
}
</script>

<style lang="scss" scoped>
.container {
    min-height: 100vh;
    padding: 10rpx;
    padding-top: 0;
    background-color: #f5f5f5;

    checkbox {
        transform: scale(0.7); // 缩小checkbox的大小
    }

    .tabs {
        background-color: #f5f5f5;
        position: sticky;
        top: 0;
        z-index: 6;
        padding-top: 10rpx;
    }

    .allSelection {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10rpx;
        // background-color: #fff;
        border-radius: 10rpx;
    }

    .drawer {
        padding: 20rpx;
        padding-left: 40rpx;

        .drawerTitle {
            width: 100%;
            text-align: center;
            font-size: 32rpx;
            font-weight: bold;
            margin-bottom: 20rpx;
        }

        .confirm {
            width: 100%;
            font-size: 34rpx;
            line-height: 70rpx;
            text-align: center;
            border-radius: 10rpx;
            background-color: #4b7dfa;
            color: #fff;
            margin-top: 30rpx;
        }
    }

    .selectAll {
        display: flex;
        align-items: center;
        padding: 0 10px 10px 10px;
        background-color: #f5f5f5;
        // margin-bottom: 10px;
    }

    .batchBtn {
        font-size: 28rpx;
        width: 200rpx;
        height: 70rpx;
    }

    .financingList {
        font-size: 24rpx;

        .listItem {
            margin-top: 10rpx;

            .listItemTop {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding-bottom: 10rpx;
                border-bottom: 1rpx solid #eee;
            }

            .listItemContent {
                margin-top: 10rpx;

                .itemLine {
                    display: flex;
                    align-items: center;
                    margin-top: 10rpx;
                }

                .contentLeft {
                    width: 30%;
                }

                .contentRight {
                    width: 70%;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }

                .moreTag {
                    width: 60%;
                    display: flex;
                    justify-content: space-around;
                    align-items: center;
                    margin-bottom: 10rpx;
                }
            }


            .listItemBottom {
                padding-top: 20rpx;
                border-top: 1rpx solid #eee;
                display: flex;
                justify-content: flex-end;
                align-items: center;
                position: relative;

                .orderState {
                    width: 240rpx;
                    text-align: center;
                    background-color: #F3A740;
                    position: absolute;
                    left: -100rpx;
                    bottom: 30rpx;
                    transform: rotate(45deg);
                }

                .listBtn {
                    padding: 5rpx;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    font-size: 28rpx;
                    width: 140rpx;
                    height: 70rpx;
                    margin: 0 10rpx;
                    color: #fff;

                    :last-child {
                        margin-right: 0;
                    }
                }

            }
        }
    }

    :deep(.uni-tag) {
        padding: 4rpx 8rpx !important;
    }


    // 空状态
    .empty-state {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        .empty-icon {
            width: 200rpx;
            height: 200rpx;
            margin-bottom: 20rpx;
        }

        .empty-text {
            font-size: 28rpx;
            color: #999;
        }
    }

}

// 动画效果
.card-animate {
    opacity: 0;
    transform: translateY(20rpx);
    animation: fadeInUp 0.5s forwards;
}

.cancel-login {
    color: #2b92ff;
    text-align: center;
    letter-spacing: 5rpx;
    font-size: 32rpx;
    margin-top: 40rpx;
    width: 100%;
    border-radius: 30rpx;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30rpx);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}
</style>